<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="../node_modules/lodash/lodash.js"></script>
</head>
<body>
<div id="hd">
    <li v-for="v in dj">
        {{v.name}}-{{v.sex}}
    </li>
    <input type="radio" v-model="type" value="girl" name="sex">女孩
    <input type="radio" v-model="type" value="boy" name="sex">男孩
</div>
<script>
    var app=new Vue({
        el:'#hd',
        computed:{
            dj:function(){
                console.log(this.type);
                if(this.type=='all'){
                    return this.user;
                }else{
                    var type=this.type;
                    return this.user.filter(function(v){
                        return v.sex==type;
                    })
                }
            }
        },
        data:{
            type:'all',
            user:[
                {name:'小明',sex:'girl'},
                {name:'小明',sex:'girl'},
                {name:'小王',sex:'boy'},
                {name:'小王',sex:'boy'}
            ]
        }
    })

</script>
</body>
</html>